常见面试题之左边固定，右边自适应布局(八种方法：负边距、flex、Grid、table-cell等)

这个布局是经典的布局之一，也是深入了解布局、BFC、文档流的有效方法之一，同时也能学习新的布局方法。下面对左边固定，右边自适应布局做一个全面的分析与概括。

布局要求： 左边固定100px, 右边自适应

1. 左position:absolute, 右margin-left -- 入门基础写法

本方法主要利用了position:absolute脱离文档流的特性。

<div class="parent">
  <div class="l-child">左边固定1  左边固定2 左边固定3</div>
  <div class="r-child">右边自适应1 右边自适应2 右边自适应3</div>
</div>

//父元素相对定位，作为子元素绝对定位的参考
.parent{display:relative; background:#ddd }
.l-child{position:absolute; width:100px;background:#bbb }
.r-child{margin-left:100px;background:#999 }

demo展示

2. float:left + margin-left 触发父元素宽度计算 -- 技巧写法

本方法利用了float:left脱离文档流的特性。与方法1类似，但脱离文档流的方式不一样，同时父元素起的作用也有差异。方法1中父元素需要用display:relative作为定位基准，给子元素进行定位参考；方法2中父元素使用overflow:hidden清除浮动，避免后续元素受到影响。

.parent{background:#ddd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}

demo展示

3. float:left + BFC 触发右子元素宽度计算 -- 技巧写法

本方法利用左浮动确定宽度，右边盒子overflow:hidden触发BFC，使其不与浮动盒子区域重叠，且会重新计算宽度。

.parent{background:#ddd;}
.l-child{float:left;width:100px;background:#bbb; }
.r-child{overflow:hidden;background:#999;}

demo展示

4. 左右float，右边使用负边距 -- 专家级技巧写法

本方法布局较复杂，dom结构也与绝大多数方法不一样，get的难点：

1. 父元素清除浮动，以免其他元素受到浮动的影响；
2. A元素宽100%不变，margin-left:-100px后，文档流认为以边框为界，A减少了100px，而A是右浮动，也就是左边有100px空白可填充的文档流空间；
3. 子元素A1是认为父元素大小没有变化，margin-left:100px后，正好等于父元素在外部空出来的文档流空间；
4. B元素左浮动，且是后面的dom节点，正好占据并且覆盖A空出来的100px空间。

<div class="parent">
  <div class="r-box"> <!--A元素-->
    <div class="r-content">  <!--A1元素-->
      右边自适应1 右边自适应2 右边自适应3
    </div>
  </div>
  <div class="l-box"> <!--B元素-->
    左边固定1  左边固定2 左边固定3
  </div>
</div>

.parent{background:#ddd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}

demo展示

5. table-cell 表格布局 -- 上古写法

本方法采用了table-cell布局，简单而古老的布局方式。也可以直接用表格元素实现。

.parent{display: table;width:100%; background:#ddd;} 
.l-child, .r-child{display:table-cell;} 
.l-child{width:100px;background:#bbb;}
.r-child{background:#999; }

demo展示

6. calc动态计算宽度 -- 新旧写法结合

本方法采用了传统的inline-block布局，加上calc动态计算右侧元素宽度。

.parent{font-size:0; background:#ddd;} // font-size:0 消除inline-block盒子间的空格
.l-child, .r-child{display:inline-block; vertical-align:top;
  box-sizing:border-box; font-size:14px; } // inline-block盒子顶部对齐
.l-child{width:100px;background:#bbb;}
.parent .r-child{width:calc(100% - 100px);background:#999; }

demo展示

7. flex布局 -- 新布局方式

本方法父元素flex布局后，子元素默认继承弹性布局，除非确定子元素的弹性布局方式。另外，此方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！

.parent{display:flex; background:#ddd }
.l-child{flex:0 0 100px; background:#bbb }
.r-child{background:#999}

demo展示

8. Grid布局 -- 新布局方式

css3的新型布局，相比flex更加灵活，可以用于复杂的布局。

.parent{display: grid; grid-template-columns: 100px 1fr;
    align-items: start; background:#ddd;}
.l-child, .r-child{box-sizing:border-box;}
.l-child{grid-column: 1; background:#bbb;}
.r-child{grid-column: 2;background:#999; }

demo展示

上面八种布局，涵盖了css中诸多核心知识点（文档流、BFC、float、postion定位、flex布局、Grid布局）。运用以上的知识点，进行灵活组合，也能实现此布局，比如calc + float等。灵活掌握以上的知识点，就能够胜任几乎所有的布局。在实践中，兼容性好、层级少、不改变文档流、无需计算自适应宽度的方法逐渐成为主流，成为开发者的首选。